<template>
  <view class="he-page-content">
    <view class="he-search">
      <view class="he-input flex align-center" @tap="navigateTo">
        <view class="iconfont iconsearchbar_search"></view>
        <text class="he-placeholder" v-if="!keyword.search">输入商品名称搜索</text>
        <text class="he-input__text" v-else>{{ keyword.search }}</text>
      </view>
    </view>
    <list-sort @sort="setSort"></list-sort>
    <list-a :list="list" v-if="style == 0" @navigateTo="toDetail"></list-a>
    <list-b :list="list" v-else-if="style == 1" @navigateTo="toDetail"></list-b>
    <list-c :list="list" v-else-if="style == 2" @navigateTo="toDetail"></list-c>
    <list-d :list="list" v-else-if="style == 3" @navigateTo="toDetail"></list-d>
    <he-load-more v-if="list.length > 0" :status="loadStatus"></he-load-more>
    <view class="safe-area-inset-bottom"></view>
    <he-no-content-yet v-if="isNothing" text="暂未找到相关商品"></he-no-content-yet>
    <HeLoginModel />
    <!-- #ifdef H5 -->
    <he-float-window :bottom="100" pages-url="goods-list"></he-float-window>
    <!--#endif-->
    <!-- #ifndef H5 -->
    <he-float-window pages-url="goods-list"></he-float-window>
    <!--#endif-->
  </view>
</template>

<script>
import listSort from '../../components/list-sort.vue';
import listA from '../../components/goods-list/list-A.vue';
import listB from '../../components/goods-list/list-B.vue';
import listC from '../../components/goods-list/list-C.vue';
import listD from '../../components/goods-list/list-D.vue';
import heNoContentYet from '../../components/he-no-content-yet.vue';
import heLoadMore from '../../components/he-load-more.vue';
import HeLoginModel from '../../components/he-login-layout.vue';
import { mapActions } from 'vuex';
import heFloatWindow from '../../components/layout/he-float-window.vue';

export default {
  name: 'list',
  data() {
    return {
      style: 0,
      list: [],
      page: {
        count: 1,
        size: 10,
        current: 1
      },
      keyword: {
        group: null,
        search: '',
        sort: {
          sort: 'DESC'
        }
      },
      isNothing: false,
      loadStatus: 'loadmore'
    };
  },
  components: {
    listSort,
    listA,
    listB,
    listC,
    listD,
    heNoContentYet,
    heLoadMore,
    HeLoginModel,
    heFloatWindow
  },
  methods: {
    ...mapActions({
      setCartNumber: 'cart/setCartNumber'
    }),
    navigateTo: function () {
      let url = '/pages/goods/search?keyword=' + this.keyword.search + '&from=/pages/goods/list';
      uni.redirectTo({
        url: url,
        fail: function (res) {
          uni.switchTab({
            url: url
          });
        }
      });
    },
    getList: function () {
      let _this = this;
      return new Promise(function (resolve, reject) {
        _this.$heshop
          .search(
            'post',
            {
              include: 'goods'
            },
            {
              keyword: _this.keyword
            }
          )
          .page(_this.page.current, _this.page.size)
          .then(function (res) {
            let { data, headers } = res;
            resolve(data);
            // #ifdef MP-WEIXIN
            _this.page = {
              current: +headers['X-Pagination-Current-Page'],
              count: +headers['X-Pagination-Page-Count'],
              size: +headers['X-Pagination-Per-Page']
            };
            // #endif
            // #ifdef H5
            _this.page = {
              current: +headers['x-pagination-current-page'],
              count: +headers['x-pagination-page-count'],
              size: +headers['x-pagination-per-page']
            };
            // #endif
          })
          .catch(err => {
            reject(err);
          });
      });
    },
    setSort: function (e) {
      let style = this.style;
      let _this = this;
      this.list = [];
      this.keyword.sort = {
        [e.key]: e.value
      };
      this.page.current = 1;
      this.loadStatus = 'loadmore';
      this.getList().then(function (res) {
        _this.style = -1;
        _this.list = res;
        setTimeout(function () {
          _this.style = style;
        });
        _this.loadStatus = _this.list.length < _this.page.size ? 'nomore' : 'loadmore';
      });
    },
    toDetail: function (item) {
      uni.navigateTo({ url: '/pages/goods/detail?id=' + item.id });
    }
  },
  onLoad(options) {
    this.keyword.group = options.group ? options.group : null;
    this.style = options.goods_show ? options.goods_show : 1;
  },
  onShow() {
    if (this.isLogin) {
      this.setCartNumber();
    }
    let _this = this;
    let search_key = this.getStorageSync('search_key');
    if (search_key) {
      this.keyword.search = search_key;
      uni.removeStorageSync('search_key');
    }
    this.page.current = 1;
    this.getList().then(function (res) {
      _this.list = res;
      _this.isNothing = _this.list.length === 0;
      _this.loadStatus = _this.list.length < _this.page.size ? 'nomore' : 'loadmore';
    });
  },
  onReachBottom() {
    let _this = this;
    if (this.page.count > this.page.current) {
      this.page.current++;
      this.loadStatus = 'loading';
      this.getList().then(function (res) {
        _this.list.push(...res);
        _this.loadStatus = 'loadmore';
      });
    } else {
      this.loadStatus = 'nomore';
    }
  }
};
</script>

<style scoped>
.he-search {
  width: 100%;
  padding: 24px 30px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: #ffffff;
}

.he-input {
  background: #f7f7f7;
  border-radius: 32px;
  height: 64px;
  line-height: 64px;
}

.he-placeholder {
  font-size: 28px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 32px;
}

.iconsearchbar_search {
  width: 28px;
  height: 28px;
  line-height: 28px;
  font-size: 32px;
  margin: 0 16px 0 32px;
  color: RGBA(157, 157, 157, 1);
}

.he-page-content {
  padding-bottom: 40px;
}

.he-input__text {
  font-size: 28px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #222222;
  overflow: hidden;
  height: 64px;
}
</style>
